<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/01-style.css">
</head>

<body>
    <div id="app">
        <div class="logo_pic">
            <img src="../img/logo.png" alt="">
        </div>
        <div class="home_tabs">
            <a href="/" title="" class="item checked">
                <p>首页</p>
            </a>
            <a href="/" title="" class="item checked"> 发现好书 </a>
            <a href="/" title="" class="item checked"> 精选书单 </a>
            <a href="/" title="" class="item checked"> 官方活动 </a>
            <a href="/" title="" class="item checked"> 最美图书馆 </a>
            <a href="/" title="" class="item checked"> 图书馆故事 </a>
        </div>
        <!-- 主页内容 -->
        <div class="home">
            <div class="home_swiper">
                <ul>
                    <li> <a href=""><div class="img"></div></a></li>
                    <li> <a href=""><div class="img"></div></a></li>
                    <li> <a href=""><div class="img"></div></a></li>
                    <li> <a href=""><div class="img"></div></a></li>
                    <li> <a href=""><div class="img"></div></a></li>
                </ul>
                <span></span>
            </div>
            <div class="home_content">
                <!-- 精选书单 -->
                <div class="home_title">
                    <div class="title">精选书单</div>
                    <div class="title_type">
                        <span>更多</span>
                        <i></i>
                    </div>
                </div>
                <div class="good_book">
                    <ul>
                        <li class="good_book_detail">
                            <a href="">
                                <img src="../img/good_book_detail.png" alt="">
                                <div class="book_name">
                                    【书单分享】国外经典书籍推荐
                                </div>
                                <div class="book_date">
                                    2022-12-23
                                </div>
                            </a>
                        </li>
                        <li class="good_book_detail">
                            <a href="">
                                <img src="../img/good_book_detail.png" alt="">
                                <div class="book_name">
                                    【书单分享】国外经典书籍推荐
                                </div>
                                <div class="book_date">
                                    2022-12-23
                                </div>
                            </a>
                        </li>
                        <li class="good_book_detail">
                            <a href="">
                                <img src="../img/good_book_detail.png" alt="">
                                <div class="book_name">
                                    【书单分享】国外经典书籍推荐
                                </div>
                                <div class="book_date">
                                    2022-12-23
                                </div>
                            </a>
                        </li>
                        <li class="good_book_detail">
                            <a href="">
                                <img src="../img/good_book_detail.png" alt="">
                                <div class="book_name">
                                    【书单分享】国外经典书籍推荐
                                </div>
                                <div class="book_date">
                                    2022-12-23
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 发现好书 -->
                <div class="home_title">
                    <div class="title">发现好书</div>
                    <div class="title_type">
                        <span>更多</span>
                        <i></i>
                    </div>
                </div>
                <div class="boutique_book">
                    <ul>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/boutique_book.png" alt="">
                                <div class="book_name">
                                    雾都孤儿
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/boutique_book.png" alt="">
                                <div class="book_name">
                                    雾都孤儿
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/boutique_book.png" alt="">
                                <div class="book_name">
                                    雾都孤儿
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/boutique_book.png" alt="">
                                <div class="book_name">
                                    雾都孤儿
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/boutique_book.png" alt="">
                                <div class="book_name">
                                    雾都孤儿
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/boutique_book.png" alt="">
                                <div class="book_name">
                                    雾都孤儿
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 图书推荐榜 -->
                <div class="home_title">
                    <div class="title">图书推荐榜</div>
                    <div class="title_type">
                        <span>更多</span>
                        <i></i>
                    </div>
                </div>
                <div class="recommendation_list">
                    <ul>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <img class="icon" src="../img/icon_first.png" alt="">
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <img class="icon" src="../img/icon_second.png" alt="">
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <img class="icon" src="../img/icon_third.png" alt="">
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
                <!-- 新书推荐 -->
                <div class="home_title">
                    <div class="title">新书推荐</div>
                    <div class="title_type">
                        <span>更多</span>
                        <i></i>
                    </div>
                </div>
                <div class="new_book">
                    <ul>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/new_book.png" alt="">
                                <div class="book_name">
                                    散养教育
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/new_book.png" alt="">
                                <div class="book_name">
                                    散养教育
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/new_book.png" alt="">
                                <div class="book_name">
                                    散养教育
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/new_book.png" alt="">
                                <div class="book_name">
                                    散养教育
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/new_book.png" alt="">
                                <div class="book_name">
                                    散养教育
                                </div>
                            </a>
                        </li>
                        <li class="boutique_book_detail">
                            <a href="">
                                <img src="../img/new_book.png" alt="">
                                <div class="book_name">
                                    散养教育
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 阅读排行 -->
                <div class="home_title">
                    <div class="title">阅读排行</div>
                    <div class="title_type">
                        <span>更多</span>
                        <i></i>
                    </div>
                </div>
                <div class="reading_ranking">
                    <ul>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <img class="icon" src="../img/icon_first.png" alt="">
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <img class="icon" src="../img/icon_second.png" alt="">
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <img class="icon" src="../img/icon_third.png" alt="">
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>
                        <li class="recommendation_list_detail">
                            <a href="">
                                <div class="detail_left">
                                    <span class="num">4</span>
                                    <img src="../img/recommendation.jpg" alt="">
                                </div>
                                <div class="detail_right">
                                    <div class="b_name">狂人日记</div>
                                    <div class="a_name">鲁迅</div>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
                <!-- 官方活动 -->
                <div class="home_title">
                    <div class="title">官方活动</div>
                    <div class="title_type">
                        <span>更多</span>
                        <i></i>
                    </div>
                </div>
                <div class="official_activities">
                    <ul>
                        <li class="good_book_detail">
                            <a href="">
                                <img src="../img/good_book_detail.png" alt="">
                                <div class="book_name">
                                    【书单分享】国外经典书籍推荐
                                </div>
                                <div class="book_date">
                                    2022-12-23
                                </div>
                            </a>
                        </li>
                        <li class="good_book_detail">
                            <a href="">
                                <img src="../img/good_book_detail.png" alt="">
                                <div class="book_name">
                                    【书单分享】国外经典书籍推荐
                                </div>
                                <div class="book_date">
                                    2022-12-23
                                </div>
                            </a>
                        </li>
                        <li class="good_book_detail">
                            <a href="">
                                <img src="../img/good_book_detail.png" alt="">
                                <div class="book_name">
                                    【书单分享】国外经典书籍推荐
                                </div>
                                <div class="book_date">
                                    2022-12-23
                                </div>
                            </a>
                        </li>
                        <li class="good_book_detail">
                            <a href="">
                                <img src="../img/good_book_detail.png" alt="">
                                <div class="book_name">
                                    【书单分享】国外经典书籍推荐
                                </div>
                                <div class="book_date">
                                    2022-12-23
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <div class="friendship">
                <span>友情链接:</span>
                <a href="">藏书馆</a>
                <a href="">遗失登报</a>
            </div>
            <div class="foot">
                <h3>联系我们</h3>
                <p class="double">如您有任何疑问,请通过如下方式联系我们</p>
                <div class="info">
                    <div class="code">
                        <img src="../img/code.jpg" alt="">
                        <p class="code_name">藏书馆公众号</p>
                    </div>
                    <div class="contactinfo">
                        <p>邮箱:xmzgyz@126.com</p>
                        <p>电话:0592-6300088</p>
                        <p>客服QQ:2512204756</p>
                        <p>微信客服: cangshuguan0</p>
                    </div> 
                </div>
                <div class="tip">
                    Copyright © www.geeboo.com, All Rights Reserved. 厦门正观易知科技有限公司 版权所有
                </div>
            </div>
        </div>
    </div>
</body>

</html>